<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/public/head.jsp" %>
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport"
          content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${system}/static/css/id_card.css"/>
    <link rel="stylesheet" href="${system}/static/css/mui_alert.css"/>
    <script src="${system}/static/js/mui.min.js"></script>
    <script src="${system}/static/js/mui.js"></script>
    <title>身份证验证</title>
</head>

<body>

<div class="info_list" style="border-bottom:none;">
    <div class="list_left2">身份证上传<span>(照片支持3M以下的png和jpg格式)</span></div>
</div>
<div class="id_img_wp">
    <form id="Go" enctype="multipart/form-data" method="post" action="${system}/card/upload/idcard">
        <input type="file" onchange="getzImg(this)" name="positive" style="display:none;border:1px dashed #F00;" id="img_z"/>
        <input type="file" onchange="getfImg(this)" name="reverse_side" id="img_f" style="display:none"/>
        <div class="img_wp" onclick="zhengmian()">
            <img src="${system}/static/images/z.svg" id="zmz"/>
            <p class="img_intro">身份证正面照</p>
        </div>

        <div class="img_wp" onclick="fanmian()">
            <img src="${system}/static/images/f.svg" id="fmz"/>
            <p class="img_intro">身份证反面照</p>
        </div>
        <div class="cf"></div>
        <p style="text-align:center;">
            <input type="submit" value="确认申请" class="save_btn"/>
        </p>
    </form>
</div>

<script>



    $(function () {
        $('.img_wp img').height($('.img_wp img').width() * 0.6);
        $(window).resize(function () {
            $('.img_wp img').height($('.img_wp img').width() * 0.6);
        })
    })

    //正面
    function zhengmian() {
        $('#img_z').click();
    }

    //回显
    function getzImg(imgFile) {

        var file = imgFile.files[0];

        var reader = new FileReader();
        reader.readAsDataURL(file); //将文件读取为Data URL小文件   这里的小文件通常是指图像与 html 等格式的文件
        reader.onload = function (e) {
            $("#zmz").attr("src", e.target.result);
        }
    }

    //反面
    function fanmian() {
        $('#img_f').click();
    }

    //回显
    function getfImg(imgFile) {

        var file = imgFile.files[0];

        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            $("#fmz").attr("src", e.target.result);
        }
    }


    var f=true;
    $("#Go").submit(function () {
        if (f==true){
            var z_suffix=$('#img_z').val().substring($('#img_z').val().lastIndexOf(".")).toLowerCase();
            var f_suffix=$("#img_f").val().substring($("#img_f").val().lastIndexOf(".")).toLowerCase();
            if ((z_suffix==".png" || z_suffix==".jpeg" || z_suffix==".jpg") && (f_suffix==".png" || f_suffix==".jpeg" || f_suffix==".jpg")) {
                f=false;
                return true;
            }else{
                f=true;
                mui.toast("请选择正确的文件格式上传,且不得为空!");
                return false;
            }
        }else{
            mui.alert("不可重复提交!","提示","OK");
            return false;
        }
    })


</script>
</body>

</html>